import React from "react"
import { useLocation, Link } from "react-router-dom"
import { Breadcrumb } from "antd"

const MyBreadcrumb: React.FC = () => {
  const location = useLocation()
  const pathSnippets = location.pathname.split("/").filter((i) => i)

  const breadcrumbItems = [
    {
      key: "home",
      title: "Home",
      href: "/",
    },
    ...pathSnippets.map((_, index) => {
      const url = `/${pathSnippets.slice(0, index + 1).join("/")}`
      return {
        key: url,
        title: url.split("/").pop(),
        href: url,
      }
    }),
  ]

  return <Breadcrumb style={{ margin: "16px 0" }} items={breadcrumbItems} />
}

export default MyBreadcrumb
